
<!DOCTYPE html>
<html>
<!--
   This is a jQuery Tools standalone demo. Feel free to copy/paste.
   http://flowplayer.org/tools/demos/

   Do *not* reference CSS files and images from flowplayer.org when in
   production Enjoy!
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery Tools standalone demo</title>
<script src="jq.js"></script>
<script src="jq.tab.js"></script>

<style>
body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
}

/* root element for tabs  */
ul.css-tabs {
    margin:0 !important;
    padding:0;
    height:30px;
    border-bottom:1px solid #666;
}

/* single tab */
ul.css-tabs li {
    float:left;
    padding:0;
    margin:0;
    list-style-type:none;
}

/* link inside the tab. uses a background image */
ul.css-tabs a {
    float:left;
    font-size:13px;
    display:block;
    padding:5px 30px;
    text-decoration:none;
    border:1px solid #666;
    border-bottom:0px;
    height:18px;
    background-color:#efefef;
    color:#777;
    margin-right:2px;
    position:relative;
    top:1px;
    outline:0;
    -moz-border-radius:4px 4px 0 0;
}

ul.css-tabs a:hover {
    background-color:#F7F7F7;
    color:#333;
}

/* selected tab */
ul.css-tabs a.current {
    background-color:#ddd;
    border-bottom:1px solid #ddd;
    color:#000;
    cursor:default;
}


/* tab pane */
.css-panes div {
    display:none;
    border:1px solid #666;
    border-width:0 1px 1px 1px;
    min-height:150px;
    padding:15px 20px;
    background-color:#ddd;
}


</style>
</head>
<body><!-- tabs -->
<ul class="css-tabs">
  <li><a id="t1" href="#tab1">基本信息</a></li>
  <li><a id="t2" href="#tab2">上传附件</a></li>
  <li><a id="t3" href="#tab3">上传图片</a></li>
</ul>
<!-- panes -->
<div class="css-panes">

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
      viverra, leo sit amet auctor fermentum, risus lorem posuere
      tortor, in accumsan purus magna imperdiet sem.
    </p>

    <p>
      Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
      facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
      nibh metus, faucibus quis, semper ut, dignissim id, diam.
    </p>
  </div>

  <div>
    <p>
      Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
      molestie sed, tristique sit amet, blandit eu, turpis. Mauris
      hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
      molestie dui quam vitae dui.
    </p>
    <p>
      Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
      tortor. Maecenas id augue. Vivamus interdum nulla ac
      dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
      eget dui volutpat molestie.
    </p>
  </div>

  <div>
    <p>
      Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
      imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
      nisl. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus.
    </p>

    <p>
      In sed dolor. Etiam eget quam ac nibh pharetra
      adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
      mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
      nisi. Vivamus at enim. Integer semper imperdiet
      massa. Vestibulum nulla massa, pretium quis, porta id,
      vestibulum vitae, velit.
    </p>
  </div>
</div>
<!-- activate tabs with JavaScript -->
<script>
  $(function() {
  $(".css-tabs:first").tabs(".css-panes:first > div");
  });
</script>
</body>
</html>